@import "iconfonts.css";
html,body,div,ul,ol,li,p,span{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
.content
{
    position: relative;
    width:942px;
    height:367px;
    background: #bec1c8;
    margin: 50px auto;
    border-radius: 10px;
    padding: 10px;
}
ul{
    position: relative;

}
li{float: left;
    height: 56px;
    width:56px;
    margin-bottom: 8px;
    margin-right: 8px;
    border-radius: 5px;
    background: #eff0f2;
    border-top: 1px solid #f5f5f5;
    box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;
    cursor:pointer;
    /*transition:1s;*/

}

.first-line{
    height:25px;
    display: flex;
    justify-content: space-between;
    text-align: center;

}
.first-line span{
    flex: 1;
    height: 25px;
    line-height: 25px;
}
.arrow-key li span.icon,.first-line span.icon{
    padding-top:6px;
}



.clear-margin{
    margin-right: 0;

}
.esc{
    width: 90px;
}

.enter{
    width:105px;
}
.shift{
    width: 137px;
}
.command{
    width: 72px;
}
.space{
    width: 314px;
}

/*方向键*/
.arrow-key{

    right: 8px;
    top:299px;
    float: left;
    width: 184px;
    background: none;
    margin-right: 0;
    border: none;
    box-shadow: none;

}
.arrow-key li{
    height:25px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    position: absolute;
    margin: 0;
}
.arrow-key li:nth-of-type(1){
    height: 56px;
    top:299px;
    left:748px;
}
.arrow-key li:nth-of-type(2){

    top:299px;
    left: 812px;
}
.arrow-key li:nth-of-type(3){

    top:330px;
    left: 812px;
}

.arrow-key li:nth-of-type(4){
    height: 56px;
    top:299px;
    left:876px;
}
.arrow-key li span{
    flex: 0.5;
}
.arrow-key li:nth-of-type(1) ,.arrow-key li:nth-of-type(4) {
    flex-direction: column;
}
.arrow-key li:nth-of-type(1) span,.arrow-key li:nth-of-type(4) span{

}

li>span{
    display: block;
    text-align: center;
    height: 56px;
    line-height: 56px;
}
span{
    font-size: 12px;
    color:#a5a6aa ;
    user-select: none;
}
/*没有按键的键盘 */
.installation li{
    opacity: 0;
}
/*原料键盘   */
.start{
    left: 461px !important;
    top: 188px !important;
    transform: translateX(-50%) translateY(-50%) scale(2);
    z-index: 100;
    animation: up 1s linear forwards;
    animation-delay: 1s;


}

.back{
    left: 461px !important;
    top: 188px !important;
    transform: translateX(-50%) translateY(-50%) scale(2);
    z-index: 100;
    animation: down 2s linear forwards;

}
@keyframes up {
    0%{top:188px }
    100%{top:-230px;visibility: hidden; }
}
@keyframes down {
    0%{opacity:0; }
    99%{opacity: 0;}
    100%{opacity:1 }
}


/*选中状态*/
.chosen{

    border: 2px solid #3d8cfd !important;
    opacity: 1 !important;
    box-shadow: none;
}
.chosen span{
    color: #bec1c8;
}
/*空键盘*/
.empty{
    background: #9e9e9e;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.18) inset;
    border-top: none;

}
.empty span{
    color: #9e9e9e;
}

.buttons{
    width: 942px;
    display: flex;
    margin: 50px auto;
    margin-bottom: -36px;
    justify-content: space-between;
}
.buttons button{
    padding:8px 16px;
    font-size: 16px;
}

.buttons select{
    padding:8px 16px;
    font-size: 16px;
}
.c-border{
    border: 2px solid #3d8cfd;
}

.tag{}